<template>
  <div class="myContainer">
    <!-- 头部标题 start -->  
    <el-row class="myBorderBottom">
      <el-col :span="7" class="myTitleText myLineHeight_40px">{{title}}</el-col>
      <el-col :span="17" class="myTextAlignRight">
        <!-- <el-button type="primary" class="myBgGreen" @click="addClassification=true">新增</el-button>
        <el-button type="primary" class="myBgGreen">导入</el-button> -->
      </el-col>
    </el-row>
    <!-- 头部标题 end --><!-- 842px -->
    <el-row :gutter="10" style="width:592px; background: #ccc; margin:0 auto; padding-top: 10px">
      <el-col :span="col" class="label">
        <el-card :body-style="cardBody" :style="{'width':cardBox,'margin':'0 auto'}">
          <div class="text">资产名称：XXXXXXXXXXXXX</div>
          <div class="text">购入时间：XXXX-XX-XX</div>
          <div class="text"></div>
          <div class="barbox">
            <canvas id="barcode1"></canvas>
          </div>
          <el-radio v-model="tag_used" :label="1">使用</el-radio>
        </el-card>
      </el-col>
      <el-col :span="col" class="label">
        <el-card :body-style="cardBody" :style="{'width':cardBox,'margin':'0 auto'}">
          <div class="text">资产名称：XXXXXXXXXXXXX</div>
          <div class="text"></div>
          <div class="text"></div>
          <div class="barbox">
            <canvas id="barcode1"></canvas>
          </div>
          <el-radio v-model="tag_used" :label="2">使用</el-radio>
        </el-card>
      </el-col>
      <el-col :span="col" class="label">
        <el-card :body-style="cardBody" :style="{'width':cardBox,'margin':'0 auto'}">
          <div class="text"></div>
          <div class="text"></div>
          <div class="text"></div>
          <div class="barbox">
            <canvas id="barcode1"></canvas>
          </div>
          <el-radio v-model="tag_used" :label="3">使用</el-radio>
        </el-card>
      </el-col>
      <el-col :span="col" class="label">
        <el-card :body-style="cardBody" :style="{'width':cardBox,'margin':'0 auto'}">
          <div class="text">资产名称：XXXXXXXXXXXXX</div>
          <div class="text">规格型号：XXXXXXXX</div>
          <div class="text"></div>
          <div class="barbox">
            <canvas id="barcode1"></canvas>
          </div>
          <el-radio v-model="tag_used" :label="4">使用</el-radio>
        </el-card>
      </el-col>
      <el-col :span="col" class="label">
        <el-card :body-style="cardBody" :style="{'width':cardBox,'margin':'0 auto'}">
          <div class="text">资产名称：XXXXXXXXXXXXX</div>
          <div class="text">使用人：XXX</div>
          <div class="text">购入时间：XXXX-XX-XX</div>
          <div class="barbox">
            <canvas id="barcode1"></canvas>
          </div>
          <el-radio v-model="tag_used" :label="5">使用</el-radio>
        </el-card>
      </el-col>
      <el-col :span="col" class="label">
        <el-card :body-style="cardBody" :style="{'width':cardBox,'margin':'0 auto'}">
          <div class="barbox" id="qrcode"></div>
          <el-radio v-model="tag_used" :label="6">使用</el-radio>
        </el-card>
      </el-col>
    </el-row>
    <!-- 页面主体 start -->
    <el-row class="myBorderBottom">
      <el-col :span="7" class="myTitleText myLineHeight_40px">打印纸设置</el-col>
    </el-row>
    <el-row :gutter="10" class="myPaddingTop_10px">
      <el-col :span="5">
        <el-input placeholder="标签纸宽度" v-model="pwidth">
          <template slot="prepend">标签纸宽度</template>
        </el-input>
      </el-col>
      <!-- <el-col :span="5">
        <el-input placeholder="标签纸高度" v-model="pheight">
          <template slot="prepend">标签纸高度</template>
        </el-input>
      </el-col> -->
    </el-row>
    <!-- <el-row class="myPaddingTop_10px">
      <el-col :span="24">
        <p class="myred">*如不设置则默认宽度为5cm，高度3cm，且宽度不能低于5cm，高度不能低于1.8cm，否则保存不生效</p>
      </el-col>
    </el-row> -->
    <el-row class="myPaddingTop_10px">
      <el-col :span="24">
        <template>
          <el-radio-group v-model="ptype" @change="changePaper">
            <el-radio :label="1">标签专用纸</el-radio>
            <el-radio :label="2">A4纸(2列标签)</el-radio>
            <el-radio :label="3">A4纸(3列标签)</el-radio>
          </el-radio-group>
        </template>
      </el-col>
    </el-row>
    <el-row class="myPaddingTop_10px">
      <el-col :span="24">
        <el-button type="primary" class="myBgGreen" @click="seva">保存</el-button>
        <el-button type="primary" class="myBgGreen" @click="ondefault">恢复默认设置</el-button>
      </el-col>
    </el-row>
    <!-- 页面主体 end -->

  </div>
</template>     
  
<style scoped>
  .myBorderBottom{
    border-bottom:1px solid #dbdbdb;
    padding-bottom: 5px;
    margin-bottom: 10px;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myTitleText{
    font-weight: 500;
    font-size: 16px;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myPaddingTop_10px{
    padding-top: 10px;
  }  
  .myred{
    color: #f00;
    font-size: 12px;
  }
  .myMarginBottom_10px{
    margin-bottom: 10px;
  }
  .myMarginTop_10px{
    margin-top: 10px;
  }
  .label{
    margin-bottom: 10px;
  }
  .label div.text{
    font-size: 12px;
    height: 15px;
    line-height: 15px;
  }
  .label div.barbox{
    text-align: center;
  }
  
</style>

<script>
  import { getTemplate , updateTemplate } from '@/api/assets';
  import JsBarcode from "jsbarcode";
  import QRCode from 'qrcodejs2';
  export default {
    data(){
      return{
        title:"标签模板管理",
        ptype:'',
        pwidth:"",
        pheight:'',
        tag_used:'',
        col:12,
        cardBox:"",
        cardBody:{ padding: '14px' , height: '150px' , background: '#f5f7fa'}
      }
    },
    components: {

    },
    created(){
      document.title=this.title;
      this.ongetTemplate();
    },
    mounted(){
      JsBarcode("#barcode1", "1-1111-1111-1111", {
        textAlign: "center",
        textPosition: "bottom",
        background: "#f5f7fa",
        font: "cursive",
        fontOptions: "bold",
        fontSize: 14,
        textMargin: 0,
        height: 50,
        width: 1,
        margin: 0
      });

      new QRCode("qrcode", {  
        width: 100,  
        height: 100, 
        colorDark: "#000000",
        colorLight: "#ffffff",
        text: '1-1111-1111-1111',
        render: 'canvas',
        background: '#f0f',  
        foreground: '#ff0'  
      })  
    },
    watch: {
      pwidth(val){
        this.cardBox=Number(val)*25+'px';
      }
    },
    methods:{
      ongetTemplate(){
        let vm=this;
        getTemplate().then(response => {
          let res=response.data;
          vm.ptype=res.paper_type;
          vm.pheight=res.tag_height;
          vm.tag_used=res.tag_used;
          vm.pwidth=res.tag_width;
          vm.changePaper(res.paper_type);
        }).catch(error => {
          vm.$message.error("拉取模板信息失败！" + error.response.data.error_msg);
        })
      },
      seva(){
        let vm=this;
        if(vm.tag_used==='' || vm.pwidth==='' || vm.pheight==='' || vm.ptype===''){
          vm.$message.info("请将数据填写完整！");
          return;
        }
        let params={
          "tag_used": vm.tag_used,
          "tag_width": vm.pwidth,
          "tag_height": vm.pheight,
          "paper_type": vm.ptype
        }
        updateTemplate(params).then(response => {
          let res=response.data;
          vm.$message.success("执行成功！");
        }).catch(error => {
          vm.$message.error("执行失败！" + error.response.data.error_msg);
        })
      },
      ondefault(){
        let vm=this;
        vm.ptype=2;
        vm.pheight=6;
        vm.tag_used=1;
        vm.pwidth=10;
        vm.$message.info("已恢复默认设置,请确认保存！");
      },
      changePaper(val){
        if(val==1){
          this.col=24;
        }else if (val==2){
          this.col=12;
        }else{
          this.col=8
        }
      } 
      
    }
}
</script>

